<template>
	<view>
		<text class="secret-info" v-if="transfrom !='translateY(0)'">LZZY习题通.hzl制作</text>
		<view class="welcome-container" @touchstart="touchSart" @touchmove="touchMove" @touchend="touchEnd">
			<image src="../../static/icons/icon.png" class="ic-welcome"></image>
			<text class="welcome">WELCOME!</text>
			<text class="sub-welcome">欢迎加入柳职院</text>
			<view class="upload-container" @tap="tapToChoose">
				<image :src="avatar" mode="aspectFill" class="user-avatar"></image>
				<text class="input-holder">{{avatarUrl}}</text>
			</view>
			<input type="text" class="input-input" placeholder-class="input-holder" placeholder="请输入昵称" id="nick"
				@input="inputChange" />
			<input type="text" class="input-input" placeholder-class="input-holder" placeholder="请输入邮箱" id="email"
				@input="inputChange" />
			<input type="text" class="input-input" placeholder-class="input-holder" placeholder="请输入用户名" id="user"
				@input="inputChange" />
			<input type="text" class="input-input" placeholder-class="input-holder" placeholder="请输入手机号" id="phone"
				@input="inputChange" /><!-- 1 -->
			<view class="pwd-container input-input">
				<input v-if="isPwd" type="password" class="input-pwd" placeholder-class="input-holder"
					placeholder="请输入密码" id="password" @input="inputChange" />
				<input v-else type="text" class="input-pwd" placeholder-class="input-holder" placeholder="请输入密码"
					id="password" @input="inputChange" />
				<text
					:class="isPwd ?'iconfont icon-iconfont32pxmimabukejian ic-pwd' : 'iconfont icon-tubiaozhizuomoban ic-pwd'"
					@click="clickSwitchPwd"></text>
			</view>
			<view class="sqjs">
				<text class="wenzi">申请教师</text>
				<switch type="switch" @change="shengqing"></switch>
			</view>
			<!-- <view class="sqjs">
				<checkbox-group class="check-group" @change="changeCheck" >
					<label class="option-label" v-for="(option,index) in options" :key="option" >
						<checkbox :value="index+''" />
						<<text>{{option}}</text>
					</label>
				</checkbox-group>
			</view> -->

			<text class="btn-register input-input" @click="clickRegister">注册</text>
		</view>
	</view>
</template>

<script>
	let startY = 0
	let pic = ''
	let sq = false
	export default {
		data() {
			return {
				transfrom: 'translateY(0)',
				transition: '',
				avatar: '../../static/icons/default_user.png',
				avatarUrl: '请上专图片',
				isPwd: true,
				nick: "",
				email: "",
				user: "",
				phone: "",
				password: "",
				apply: false,
				// options: ['申请教师']
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "用户注册"
			})
		},
		computed: {
			welcomeStyle: function() {
				return {
					'transform': this.transfrom,
					'transtion': this.transition
				}
			}
		},
		methods: {
			shengqing(e) {
				console.log(e.detail.value);
				sq = e.detail.value
			},
			touchSart(e) {
				startY = e.touches[0].clientY
				// let startX=e.touches[0].clientX
				// let startX1=e.touches[1].clientX
				// let startY1=e.touches[1].clientY
			},
			//触摸移动
			touchMove(e) {
				let distance = e.touches[0].clientY - startY
				if (distance >= 150) {
					distance = 150
				}
				if (distance < 0) {
					return
				}
				this.transfrom = `translateY(${distance}rpx)`
			},
			//密钥ND
			touchEnd(e) {
				this.transfrom = 'translateY(0)'
				this.transition = 'transform 500ms linear'

			},
			//点击选择
			tapToChoose() {
				let url = this.$params.host + this.$params.action_upload
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res);
						let path = res.tempFilePaths[0]
						this.$request.postFile(url, 'file', path, {}, res => {
							console.log(res)
							let json = JSON.parse(res.data)
							pic = json.data
							this.avatarUrl = pic
							this.avatar = this.$params.host + pic
						})
					}
				})
			},
			clickSwitchPwd() {
				this.isPwd = !this.isPwd
			},
			//输入更改
			inputChange(e) {
				console.log(e.target.id);
				let prop = e.target.id
				// this[`${prop}`] =event.detail.value
				this[`${prop}`] = e.detail.value
			},
			//单击“注册”
			clickRegister() {
				if (!this.checkValid()) {
					return
				}
				let data = {
					nick: this.nick,
					user: this.user,
					avatar: pic,
					password: this.password,
					email: this.email,
					phone: this.phone,
					apply: sq
				}
				let url = this.$params.host + this.$params.action_register
				this.$request.post(url, data, res => {
					if (!res.success) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						return
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					const app = getApp()
					app.globalData.uid = res.data.id
					app.globalData.userName = res.data.userName
					app.globalData.nickName = res.data.nickName
					app.globalData.token = res.data.token
					app.globalData.avatar = res.data.avatar
					app.globalData.email = res.data.email
					app.globalData.type = res.data.type
					app.globalData.phone = res.data.phone
					app.globalData.apply=res.data.apply
					this.$noti.post(this.$params.noti_login_status)
					// uni.navigateBack()
					uni.navigateTo({
						url: "../../components/login-dialog/login-dialog"
					})
				})
				console.log(data);
			},
			//检查是否有效
			checkValid() {
				// if(this.user.length<6){
				// 	uni.showToast({
				// 		title:'用户名不能少于6个字符串',
				// 		icon:'none'
				// 	});
				// 	return false
				// }
				// if(this.email.length==0){
				// 	uni.showToast({
				// 		title:'邮箱不能为空',
				// 		icon:'none'
				// 	});
				// 	return false
				// }
				if (!this.$utils.checkLength(this.nick, 2, "用户昵称")) {
					return false
				}
				if (!this.$utils.checkLength(this.user, 2, "用户名")) {
					return false
				}
				if (!this.$utils.checkLength(this.password, 6, "密码")) {
					return false
				}
				// if (!this.$utils.) {
				// 	return false
				// }
				let regex = /^[a-zA-Z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (!regex.test(this.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return false
				}
				if (this.avatar == "../../static/icons/default_user.png") {
					uni.showToast({
						title: '请选择图片上传',
						icon: 'none'
					});
					return false
				}
				return true
			},
			
		}
	}
</script>

<style>
	@import url("register.css");
</style>
